import  React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

// 属性数据类型
type MODEL_DATA_ITEM ={
  id: string,
  label: string,
  value: string
}

type MODEL = {
  data: MODEL_DATA_ITEM[],
  label: string,
  type: string,
  value: string
}
type ATTRS_CHILD = {
  model: MODEL
}
type ATTRS = {
  label: string,
  type: string,
  child: ATTRS_CHILD
}
// 样式数据类型
type STYLE_CHILD = {
  pagePadding: VALUE,
  cmpUpperPadding: VALUE,
  cmpLowerPadding: VALUE,
  cmpUpperRadius: VALUE,
  cmpLowerRadius: VALUE,
  titleSize: VALUE,
  titleColor: VALUE,
  cmpBackground: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}
// type
type VALUE_CHILD = {
  title?:  VALUE,
  info?:  VALUE
}

type TITLE_VALUE = {
  child: VALUE_CHILD,
  label: string,
  type: string
}

interface Props {
  attrs: ATTRS;
  styles: STYLE;
  value: TITLE_VALUE;
};

// 做一个数据个映射
const styleTable = {
  pagePadding: "padding",
  cmpUpperPadding: "paddingTop",
  cmpLowerPadding: "paddingBottom",
  titleSize: "fontSize",
  infoSize: "fontSize",
  titleColor: "color",
  infoColor: "color",
  cmpBackground: "backgroundColor",
  // const strArr = ["titleColor", "cmpBackground", "infoColor"];
}

const HeTitle = (props: Props) => {
  const {attrs, styles, value} = props;
  const [comStyle, setComStyle] = useState({});
  const [comInfoStyle, setInfoStyle] = useState({});
  const [comTitleStyle, setTitleStyle] = useState({});
  const handleStyle = (child, model) => {
    let objCom = {};
    let objTitle = {};
    let objInfo = {};

    for (let key in child) {
      const element = child[key];
      if(key == "infoColor" || key == "infoSize"){
        if(key == "infoSize") {
          objInfo[styleTable[key]] = element.value + "px";
        } else {
          objInfo[styleTable[key]] = element.value;
        }
      } 
      else if(key == "titleSize" || key == "titleColor"){
        if(key == "titleSize") {
          objTitle[styleTable[key]] = element.value + "px";
        } else {
          objTitle[styleTable[key]] = element.value;
        }
      } 
      else if( styleTable[key] == 'backgroundColor') {
        objCom[styleTable[key]] = element.value;
      } 
      else if (key == 'cmpUpperRadius') {
        objCom["borderTopLeftRadius"] = element.value + 'px'
        objCom["borderTopRightRadius"] = element.value + 'px'
      }else if (key == 'cmpLowerRadius') {
        objCom["borderBottomLeftRadius"] = element.value + 'px'
        objCom["borderBottomRightRadius"] = element.value + 'px'
      }else {
        objCom[styleTable[key]] = element.value + 'px'
      }
    }
    if(model?.value) {
      if(model?.value == "left") {
        objCom["flexDirection"] = "row"
        objCom["alignItems"] = "flex-end"

      }
      if(model?.value == "center") {
        objCom["flexDirection"] = "column"
        objCom["alignItems"] = "center"
      }
    }
    return {objCom, objTitle, objInfo};
  }
  useEffect(() => {
    let {objCom, objTitle, objInfo} = handleStyle(styles?.child, attrs?.child?.model);
    console.log("---stylessss--");
    console.log(objCom)
    console.log(objTitle)
    console.log(objInfo)
    setComStyle(objCom) 
    setInfoStyle(objInfo) 
    setTitleStyle(objTitle) 
  }, [styles]);

  return (
    <View style={comStyle} className='he-title'>
      <Text style={comTitleStyle} >{value?.child?.title?.value}</Text>
      <Text className='info' style={comInfoStyle}> {value?.child?.info?.value}</Text>
    </View>
  )
}

export default HeTitle;